<template>
	<live-player
	  :src="playInfo.url"
	  autoplay
	  :style="{width: '100%', height: height}"
	  object-fit="fillCrop"
	  @statechange="statechange"
	  @error="error"
	  background-mute
	>
		<cover-view :style="{height: height, lineHeight: height}" v-if="liveState !== 'success' " class="live-loading">{{liveStateText[liveState]}}</cover-view>
	</live-player>
</template>

<script>
	export default {
		name: 'JoyVideo',
		props: {
			playInfo: {
				type: Object,
				required: true,
				default: function() {
					return {}
				}
			},
			height: {
				type: String,
				default: '430rpx'
			},
		},
		data() {
			return {
				liveStateText: {
					'loading': '加载中...',
					'success': '',
					'fail': '设备离线...',
				},
				liveState: 'loading', // loading fail success
			}
		},
		methods: {
			statechange(e){
				if(e.detail.code == 2003 || e.detail.code == 2032) {
					this.liveState = 'success';
				} else {
					this.liveState = 'loading';
				}
				console.log('live-player code:', e.detail.code)
			},
			error(e){
				this.liveState = 'fail';
				console.error('live-player error:', e.detail.errMsg)
			},
		}
	}
</script>

<style>
	.live-loading {
		width: 100%;
		text-align: center;
		color: #fff;
	}
</style>
